<template>
  <div class="body">
    <el-table width="100%" :data="friend" height="100%">
      <el-table-column label="好友列表" width="100px">
        <template>
          <el-avatar :size="60" fit="fill" :src="friend.userimg"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="username" width="180"></el-table-column>
      <el-table-column label="ID" prop="userid" fit></el-table-column>
      <el-table-column fit
        ><template slot-scope="scope">
          <el-button @click="watchFriend(scope.row)" type="text" size="medium"
            >查看信息</el-button
          >
          <el-button @click="talk(scope.row)" type="text" size="medium"
            >私聊</el-button
          >
          <el-popconfirm
            title="请确认删除好友"
            @confirm="deleteFriend(scope.row)"
          >
            <el-button slot="reference" type="text" size="medium"
              >删除好友</el-button
            >
          </el-popconfirm>
        </template></el-table-column
      >
    </el-table>
    <el-dialog title="好友信息" :visible.sync="watch">
      <div class="item">好友名字:{{ this.friendinfo.username }}</div>
      <div class="item">好友编号:{{ this.friendinfo.userid }}</div>
      <div class="item">好友邮箱:{{ this.friendinfo.email }}</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="watch = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.$http.get("my/friend").then((res) => {
      if (res.data.success === true) {
        var keymap = {
          uid: "userid",
          iconUrl: "userimg",
        };
        for (var i = 0; i < res.data.friendList.length; i++) {
          var obj = res.data.friendList[i];
          for (var key in obj) {
            var newkey = keymap[key];
            if (newkey) {
              obj[newkey] = obj[key];
              delete obj[key];
            }
          }
        }
        this.friend = res.data.friendList;
      } else {
        this.$message.error("加载失败,请重新加载!");
      }
    });
  },
  data() {
    return {
      watch: false, //好友信息弹出
      friendinfo: {
        username: "",
        userid: "",
        email: "",
      },
      friend: [],
    };
  },
  methods: {
    deleteFriend(row) {
      this.$http.post("deleteFriend", { uid: row.userid }).then((res) => {
        if (res.data.success == true) {
          this.friend.pop(row);
          this.$message.success("删除好友成功!");
        } else {
          this.$message.error("删除失败,请稍后再试!");
        }
      });
    },
    watchFriend(row) {
      //查看好友信息
      this.friendinfo.username = row.username;
      this.friendinfo.userid = row.userid;
      this.friendinfo.email = row.email;
      this.watch = true;
    },
    talk(row) {
      this.$store.commit("talkto", row);
      this.$router.push("mymessage");
    },
  },
};
</script>


<style lang="less" scoped>
.body {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
/deep/.el-table {
  font-size: 19px;
}
/deep/.el-button {
  font-size: 19px;
  padding-left: 30px;
}
/deep/.el-avatar {
  margin: 0;
}
.item {
  padding: 20px 40px;
  font-size: 25px;
}
</style>